<template>
  <div class="h-80 w-full flex flex-col">
    <div ref="echartsContainerRef" class="flex-1 h-0"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, shallowRef, watch } from "vue";
import * as echarts from "echarts";
import { useEchartsResizeAndDestory } from "../hooks/EchartsResizeAndDestoryHooks";

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  initData: {
    type: Object,
    default: () => {},
  },
});
console.log("props", props);
const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];
const option = {
  backgroundColor: "#fff",
  title: {
    text: "销售统计",
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
    },
    left: "center",
    top: "5%",
  },
  legend: {
    icon: "circle",
    top: "5%",
    right: "5%",
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: "#556677",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      label: {
        show: true,
        backgroundColor: "#fff",
        color: "#556677",
        borderColor: "rgba(0,0,0,0)",
        shadowColor: "rgba(0,0,0,0)",
        shadowOffsetY: 0,
      },
      lineStyle: {
        width: 0,
      },
    },
    backgroundColor: "#fff",
    textStyle: {
      color: "#5c6c7c",
    },
    padding: [10, 10],
    extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
  },
  grid: {
    top: "15%",
  },
  xAxis: [
    {
      type: "category",
      data: ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
      axisLine: {
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#556677",
        },
        fontSize: 12,
        margin: 15,
      },
      axisPointer: {
        label: {
          padding: [11, 5, 7],
          margin: 15,
          fontSize: 12,
          backgroundColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#fff", // 0% 处的颜色
              },
              {
                // offset: 0.9,
                offset: 0.86,
                /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                        */
                color: "#fff", // 0% 处的颜色
              },
              {
                offset: 0.86,
                color: "#33c0cd", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#33c0cd", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: "value",
      position: "right",
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#556677",
        },
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "Adidas",
      type: "line",
      data: props.initData.adidas,
      barWidth: "40%",
      symbol: "circle",
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: "#9effff",
          },
          {
            offset: 1,
            color: "#9E87FF",
          },
        ]),
        shadowColor: "rgba(158,135,255, 0.3)",
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        normal: {
          color: colorList[0],
          borderColor: colorList[0],
        },
      },
    },
    {
      name: "Nike",
      type: "line",
      data: props.initData.nike,
      symbolSize: 1,
      symbol: "circle",
      smooth: true,
      yAxisIndex: 0,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: "#73DD39",
          },
          {
            offset: 1,
            color: "#73DDFF",
          },
        ]),
        shadowColor: "rgba(115,221,255, 0.3)",
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        normal: {
          color: colorList[1],
          borderColor: colorList[1],
        },
      },
    },
    {
      name: "老北京布鞋",
      type: "line",
      data: props.initData.beijing,
      symbolSize: 1,
      yAxisIndex: 1,
      symbol: "circle",
      smooth: true,
      showSymbol: false,
      lineStyle: {
        width: 5,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "#fe9a",
          },
          {
            offset: 1,
            color: "#fe9a8b",
          },
        ]),
        shadowColor: "rgba(254,154,139, 0.3)",
        shadowBlur: 10,
        shadowOffsetY: 20,
      },
      itemStyle: {
        normal: {
          color: colorList[2],
          borderColor: colorList[2],
        },
      },
    },
  ],
};
onMounted(() => {
  init();
});
const echartsContainerRef = ref();
const chartInstance = shallowRef();
useEchartsResizeAndDestory(chartInstance, echartsContainerRef);
function init() {
  chartInit();
}
function chartInit() {
  const echartsContainer = echartsContainerRef.value;
  if (!echartsContainer) return;

  chartInstance.value = echarts.init(echartsContainer);
  chartInstance.value.setOption(option);
}
watch(
  () => props.initData,
  (newData) => {
    if (chartInstance.value) {
      chartInstance.value.setOption({
        series: [
          {
            name: "Adidas",
            data: newData.adidas,
          },
          {
            name: "Nike",
            data: newData.nike,
          },
          {
            name: "老北京布鞋",
            data: newData.beijing,
          },
        ],
      });
    }
  },
  { deep: true }
);
</script>
